<template>
  <div class="squareList">
    <div class="searchTop">
      <el-input
        v-model="searchValue"
        placeholder="请输入杠题名称"
        prefix-icon="el-icon-search"
        @input="startSearch"
      />
    </div>
    <el-tabs v-model="indexId" stretch>
      <el-tab-pane label="全部" name="0" />
      <el-tab-pane label="情感" name="1" />
      <el-tab-pane label="社会" name="2" />
      <el-tab-pane label="教育" name="3" />
      <el-tab-pane label="脑洞" name="4" />
      <el-tab-pane label="其他" name="5" />
    </el-tabs>
    <div class="infoList">
      <bar-subject-item :subject-by-search="subjectList" :page-flag="pageFlag" />
    </div>
  </div>
</template>
<script>
import eventBus from '@/api/eventBus';
import { getAllSubjectInfo } from '@/api/subject';
import BarSubjectItem from '../../../components/BarSubjectItem';
// import { debounce } from '../../../utils/validate';
export default {
  components: { BarSubjectItem },
  data() {
    return {
      searchValue: '',
      indexId: '0',
      pageFlag: 41,
      subjectAllList: [],
      subjectList: []
    };
  },
  watch: {
    indexId: {
      handler(newValue) {
        if (newValue === '0') {
          this.subjectList = this.subjectAllList;
          this.startSearch();
        } else {
          const filterList = this.subjectAllList.filter(item => {
            return item.tid === parseInt(newValue);
          });
          this.subjectList = filterList;
          this.startSearch();
        }
      }
      // immediate: true
    }
  },
  created() {
    this.indexId = this.$route.params.id ? (this.$route.params.id).toString() : '0';
  },
  mounted() {
    eventBus.$emit('changeTitle', '杠题列表');
    this.getAllSubject();
  },
  beforeDestroy() {
    eventBus.$emit('changeTitle', '杠题广场');
  },
  methods: {
    async getAllSubject() {
      await getAllSubjectInfo().then(res => {
        if (res.data.code === 200) {
          this.subjectAllList = res.data.data;
        }
      });
      if (this.indexId === '0') {
        this.subjectList = this.subjectAllList;
      } else {
        const filterList = this.subjectAllList.filter(item => {
          return item.tid === parseInt(this.indexId);
        });
        this.subjectList = filterList;
      }
    },
    startSearch() {
      if (this.searchValue === '') {
        if (this.indexId === '0') {
          this.subjectList = this.subjectAllList;
        } else {
          const filterList = this.subjectAllList.filter(item => {
            return item.tid === parseInt(this.indexId);
          });
          this.subjectList = filterList;
        }
        return;
      }
      const filterList = this.subjectList.filter(item => {
        return item.qtitle.indexOf(this.searchValue) !== -1;
      });
      this.subjectList = filterList;
    }
  }

};
</script>
<style lang="scss">
.squareList{
  .el-input{
    width: 90%;
    margin: 10px auto;
    border-radius: 20px;
    .el-input__inner{
      border-radius: 20px;
      border: none;
      background: #F2F6FC;
    }
  }
}
</style>
<style lang="scss" scoped>
.squareList{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .searchTop{
    width: 100%;
    height: 60px;
    display: flex;
    background: #fff;
    justify-content: center;
    align-items: center;
  }
  .infoList{
    width: 100%;
    height: calc(100% - 120px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
